import React, { memo, useEffect, useState } from 'react';
import _ from 'lodash';
import { connect } from 'umi';
import { Popover, Tabs } from 'antd';
import * as Icons from '@ant-design/icons';
import styles from './index.less';

const iconTypes = [
  {
    label: '线框风格',
    icon: 'BorderOutlined',
    filter: (v) => /Outlined$/.test(v),
    children: [],
  },
  {
    label: '实底风格',
    icon: 'AppstoreFilled',
    filter: (v) => /Filled$/.test(v),
    children: [],
  },
  {
    label: '双色风格',
    icon: 'SmileTwoTone',
    filter: (v) => /TwoTone$/.test(v),
    children: [],
  },
];

const renderIcon = ({ name, primaryColor }) =>
  React.createElement(
    Icons[name] || 'span',
    {
      style: {
        display: 'inline-block',
        fontSize: name ? 18 : 15,
        lineHeight: '18px',
        transform: 'translateY(2px)',
      },
      ...(/TwoTone$/.test(name) ? { twoToneColor: primaryColor } : {}),
    },
    [name ? '' : '标'],
  );
const renderTabPane = ({ label, icon, primaryColor }) => (
  <>
    {React.createElement(Icons[icon] || 'span', {
      style: { fontSize: 14, marginRight: '6px' },
      ...(/TwoTone$/.test(icon) ? { twoToneColor: primaryColor } : {}),
    })}
    {label}
  </>
);

export default connect(({ global }) => ({
  primaryColor: global.primaryColor,
}))(
  memo(
    ({ value, primaryColor, onChange }) => {
      const { iconName: currentName } = value || {};
      const { TabPane } = Tabs;
      const [iconList, setIconList] = useState(iconTypes);
      const [popoverVisible, setPopoverVisible] = useState(false);
      useEffect(() => {
        setIconList((prevList) => {
          const nextList = [...prevList];
          _.forEach(nextList, (item) => {
            _.forEach(Icons, (node, name) => {
              if (node.render && item.filter(name)) {
                if (_.indexOf(item.children, name) === -1) {
                  item.children.push(name);
                }
              }
            });
          });
          return nextList;
        });
      }, []);

      return (
        <Popover
          placement="bottomLeft"
          trigger="click"
          visible={popoverVisible}
          onVisibleChange={(status) => setPopoverVisible(status)}
          content={
            <div className={styles.popoverContainer}>
              <Tabs size="small">
                {iconList.map((cube, index) => (
                  <TabPane tab={renderTabPane({ ...cube, primaryColor })} key={`tab-${index}`}>
                    <div className={styles.iconListContainer}>
                      {cube.children.map((name) => (
                        <div
                          key={`icon-${name}`}
                          className={styles.popoverContentItem}
                          onClick={() => {
                            onChange({ iconName: name, iconLibrary: 'antD' });
                            setPopoverVisible(false);
                          }}
                        >
                          {renderIcon({ name, primaryColor })}
                          <div className={styles.popoverContentItemText}>{name}</div>
                        </div>
                      ))}
                    </div>
                  </TabPane>
                ))}
              </Tabs>
            </div>
          }
        >
          <div className={styles.dropDownSelectContainer}>
            {renderIcon({ name: currentName, primaryColor })}
          </div>
        </Popover>
      );
    },
    (
      { value: prevValue, primaryColor: prevPrimaryColor },
      { value: nextValue, primaryColor: nextPrimaryColor },
    ) => _.isEqual(prevValue, nextValue) && prevPrimaryColor === nextPrimaryColor,
  ),
);
